<!-- 主页  -->
<template>
  <div class="home-container">
    <!-- 头部导航栏 -->
    <van-nav-bar fixed placeholder safe-area-inset-top>
      <template #title>
        <van-button round class="search" type="info" to="/search">
          <i class="iconfont icon-sousuo"></i> 搜索
        </van-button>
      </template>
    </van-nav-bar>

    <!-- 文章频道列表 -->
    <div class="channels">
      <van-tabs v-model="active">
        <van-tab :title="item.name" v-for="item in channels" :key="item.id">
          <!-- 文章列表 -->
          <ArticleList :channel="item" />
        </van-tab>
        <div slot="nav-right" class="nav-right"></div>
        <div slot="nav-right" class="nav-right">
          <i class="iconfont icon-xitongcaidan" @click="showPop = true"></i>
        </div>
      </van-tabs>
    </div>

    <!-- 弹出层 -->
    <van-popup
      v-model="showPop"
      position="bottom"
      round
      :style="{ height: '90%' }"
      get-container="body"
      closeable
    >
      <ChannelEdit
        :active="active"
        :MyChannels="channels"
        @switch="switchPop"
        @changeActive="changeActive"
      />
    </van-popup>
  </div>
</template>

<script>
import { getUserChannels } from "@/api/user.js";
import ArticleList from "./components/article-list.vue";
import ChannelEdit from "./components/channelEdit.vue";
import { mapState } from "vuex";
import { getItem } from "../../utils/storage";

export default {
  name: "Home",
  data() {
    return {
      active: 0,
      channels: [],
      isLoading: false,
      showPop: false,
    };
  },
  methods: {
    async loadChannels() {
      let channels = [];
      if (this.userInfo) {
        // 获取含有token的频道列表
        const { data } = await getUserChannels();
        channels = data.data.channels;
      } else {
        // 获取本地操作过的频道列表
        let localChannels = getItem("user-channels");
        if (localChannels) channels = localChannels;
        // 没有本地操作的就获取推荐的频道 无token
        else {
          const { data } = await getUserChannels();
          channels = data.data.channels;
        }
      }
      this.channels = channels;
    },
    changeActive(index) {
      this.active = index;
    },
    switchPop(index) {
      this.showPop = false;
      this.active = index;
    },
  },
  created() {
    this.loadChannels();
  },
  components: {
    ArticleList,
    ChannelEdit,
  },
  computed: {
    ...mapState(["userInfo"]),
  },
  mounted(){
    
  }
};
</script>

<style lang= "less" scoped>
.home-container {
  background-color: #fff;
  height: 100vh;
  /* 头部搜索框区域 */
  /deep/.van-nav-bar__title {
    max-width: none;
  }
  .search {
    text-align: center;
    width: 277px;
    height: 32px;
    border: none;
    font-size: 14px;
    background: #5babfb;
    i {
      font-size: 16px;
      margin-right: 5px;
    }
  }

  /* channels页面 */
  .channels {
    i {
      width: 44px;
      height: 44px;
      position: fixed;
      top: 46px;
      right: 0;
      line-height: 44px;
      text-align: center;
      z-index: 999;
      background-color: #fff;
    }
    /deep/.nav-right {
      width: 15px;
      height: 44px;
      flex-shrink: 0;
    }
    .van-tabs {
      position: fixed;
      top: 46px;
      left: 0;
      right: 0;
    }
    /deep/.van-tabs__line {
      background-color: rgba(50, 150, 251);
    }
  }
}
</style>